<template>
	<div class="salesDataDiscovery">
		<group class="salesDataDiscoveryGroup">
			<div style="margin-top: 10px; margin-bottom: 10px">
				<span style="font-weight: bold; font-size: 18px; padding-left: 5px">{{title}}</span>
				<button-tab style="width: 120px; float: right; margin-bottom: 10px; margin-right: 10px">
					<button-tab-item selected @on-item-click="fetchData(0)">日</button-tab-item>
					<button-tab-item @on-item-click="fetchData(1)">周</button-tab-item>
					<button-tab-item @on-item-click="fetchData(2)">月</button-tab-item>
				</button-tab>
			</div>
		</group>

		<grid class="salesDataDiscoveryTitle" :show-vertical-dividers="false">
			<grid-item>
				<span class="grid-center">排名</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">咨询</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">到访</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">试听</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">电话</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">客户</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">准客户</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">签约</span>
			</grid-item>
			<grid-item>
				<span class="grid-center">销售额</span>
			</grid-item>
		</grid>

		<grid class="salesDataDiscoveryCell" v-for="(item, index) in items" :show-vertical-dividers="false">
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{(index + 1)}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.nickname.substring(0,3)}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.visitNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.demoNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.telNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.cusNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.poCusNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.contractNumber}}</span>
			</grid-item>
			<grid-item class="grid-item" v-if="index < 5 || showMore">
				<span class="grid-center">{{item.cusTotalAmount}}</span>
			</grid-item>
		</grid>
		<div style="text-align: center; background-color: lightyellow">
			<x-icon v-if="showMore == false" @click.native="showRecord" type="ios-arrow-down" size="30"></x-icon>
			<x-icon v-else @click.native="showRecord" type="ios-arrow-up" size="30"></x-icon>
		</div>

	</div>
</template>

<script>
	import NetWorking from '../../../../utils/networking'
	import dateutils from '@/utils/date'
	import {Group, Cell, XButton, Grid, GridItem, ButtonTab, ButtonTabItem} from 'vux'
	export default {
		name: "renew-contract-discovery",
		components: {
			Group,
			Cell,
			XButton,
			Grid,
			GridItem,
			ButtonTab,
			ButtonTabItem
		},
		data() {
			return {
				title: '校区咨询数据',
				items: [],
				showMore: false,
				date: ''
			}
		},
		created: function () {
			this.date = dateutils.getDate(new Date())
			this.fetchData(0)
		},
		methods: {
			fetchData: function (type) {
				let _this = this
				NetWorking.doGet(
					'ai/sales/getSalesPerf',
					null,
					{
						params: {
							date: this.date,
							type: type,
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.items = rs.salesRankList
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			showRecord: function () {
				this.showMore = !this.showMore
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: "customerDetails", params: { id: id }})
			},

			viewMore: function () {
				this.$router.push({ name: "salesDataDiscoveryAll"})
			}
		}

	}
</script>

<style>
	.grid-center {
		display: block;
		text-align: center;
		color: #666;
		text-decoration: none;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.salesDataDiscovery > .weui-grids > .weui-grid {
		padding: 10px 0px;
		text-decoration: none;
		font-size: 12px;
	}

	.grid-item:after {
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.salesDataDiscoveryTitle {
		background-color: lightgoldenrodyellow;
	}

	.salesDataDiscoveryCell {
		background-color: white;
	}
</style>